<div id="rpt_ms">
    <div class="rpt_ms">
        <el-row class="table_search">
            <el-col :span="24">
                <template>
                    <el-input type="text"
                              v-model="orgName"
                              @focus="showMenu"
                              readonly="true"
                              placeholder="请选择机构"
                              clearable></el-input>
                    <div id="menuContent"
                         class="menuContent"
                         style="display:none; position: absolute;z-index: 1000;overflow: auto;">
                        <el-tree
                                :data="orgTree"
                                :props="defaultProps"
                                @node-click="treeClick"
                                style="margin-top:0; width:180px; height: 300px;"></el-tree>
                    </div>
                    <el-date-picker
                            v-model="beginDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                        placeholder="选择开始日期">
                    </el-date-picker>
                    <el-date-picker
                            v-model="endDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择结束日期">
                    </el-date-picker>
                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
                <el-button class="btn-export" type="primary" icon="el-icon-download" @click="exportExcel">导出</el-button>
            </el-col>
        </el-row>

        <template>
            <el-table
                    size="mini"
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="corpName"
                        label="单位名称"
                        width="400">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="orgName"
                        label="机构名称"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="right"
                        width="100"
                        prop="feeUserCount"
                        label="缴费用户数">
                </el-table-column>
                <el-table-column
                        align="right"
                        width="100"
                        prop="signUserCount"
                        label="签约用户数">
                </el-table-column>
                <el-table-column
                        align="right"
                        width="100"
                        prop="tranCount"
                        label="交易记录数">
                </el-table-column>
                <el-table-column
                        align="right"
                        width="100"
                        prop="tranAmount"
                        label="交易总额">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="status"
                        label="单位状态">
                </el-table-column>
            </el-table>
            <div class="block footerBox">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="totalCount">
                </el-pagination>
            </div>
        </template>
    </div>
</div>
<!--[if IE]>
<script>
    goIEPage(IEVersion(),'${basePath}/merchantStatistics_IE');
</script>
<![endif]-->
<!--[if !IE]><!-->
<script>
    var rpt_ms;
    rpt_ms = new Vue({
        el: "#rpt_ms",
        data: {
            orgId: '',
            orgLevel: '',
            orgName:'',
            beginDate:'',
            endDate:'',
            tableData: [],
            totalCount: '',
            totalPage: '',
            currentPage: 1,
            pageSize: 10,
            orgTree:[],
            defaultProps: {
                label:'label',
                children: 'children',
                leaf:'leaf'
            },
        },
        methods: {
            searchFun: function () {
                if(rpt_ms.orgName == ''){
                    rpt_ms.orgId = '';
                    rpt_ms.orgLevel = '';
                }
                var options = {
                    'currentPage': rpt_ms.currentPage,
                    'orgId': rpt_ms.orgId,
                    'orgLevel': rpt_ms.orgLevel,
                    'beginDate': rpt_ms.beginDate,
                    'endDate': rpt_ms.endDate
                };
                const loading = rpt_ms.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                var url = '${basePath}bank/rpt/merchantStatistics/getList';
                sendService(url, options, function (resData) {
                    if (resData.status == 'success') {
                        rpt_ms.tableData = resData.t;
                        rpt_ms.totalPage = resData.page.totalPage;
                        rpt_ms.totalCount = resData.page.totalResult;

                    }
                    loading.close();
                });
            },
            handleCurrentChange: function (currentPage) {
                rpt_ms.currentPage = currentPage;
                rpt_ms.searchFun();
            },
            showMenu(event){
                $("#menuContent").slideDown("fast");
                $("body").bind("mousedown", function(event){
                    if (!(event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                        $("#menuContent").fadeOut("fast");
                        $("body").unbind("mousedown");
                    }
                });
            },
            treeClick:function(o,node,tree){
                rpt_ms.orgId = o.id;
                rpt_ms.orgName = o.label;
                rpt_ms.orgLevel = o.level;
                $("#menuContent").fadeOut("fast");

            },
            exportExcel(){
                var url = "${basePath}bank/rpt/merchantStatistics/exportExcel";
                var para = "orgId="+rpt_ms.orgId
                           +"&orgLevel="+rpt_ms.orgLevel
                           +"&beginDate="+rpt_ms.beginDate
                           +"&endDate="+rpt_ms.endDate;
                window.location.href = url + "?" + para;;
            }
        },
        created: function () {
            var url = '${basePath}bank/rpt/merchantStatistics/getList';
            var options = {currentPage: 1};
            sendService(url, options, function (resData) {
                if (resData.status == 'success') {
                    rpt_ms.tableData = resData.t;
                    rpt_ms.totalPage = resData.page.totalPage;
                    rpt_ms.totalCount = resData.page.totalResult;
                } else {
                    alert(resData);
                }
            });
            sendService("${basePath}bank/org/getUserSelectOrgTree", null, function (resData) {
                rpt_ms.orgTree = resData.t;
            });
        }
    });
</script>
<!--<![endif]-->
<style scoped>
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    .el-input{
        width: auto;
    }
    .text-r{
        text-align: right;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }

    #menuContent{
        /*left: 0 !important;*/
        /*top: 40px !important;*/
        background-color: #fff;
        border: 1px solid #ccc;
    }


    .cla_409EFF{
        color: #409EFF;
    }
    .cla_5a5e66{
        color: #5a5e66;
    }
    .btn-export{
        position: absolute;
        right: 30px;
    }
</style>
